<template>
    <AppLayout>
        <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg dark:shadow-gray-900 max-w-md mx-auto mt-20">
            <!-- 标题和深色模式按钮 -->
            <div class="flex justify-between items-center mb-6">
                <h1 class="text-4xl font-bold text-blue-900 dark:text-blue-300">用户注册</h1>
                <div class="flex space-x-2">
                    <button @click="goBack"
                            class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600">
                        <div class="i-mdi-arrow-left"></div>
                    </button>
                    <button @click="themeStore.toggleTheme"
                            class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600">
                        <div :class="themeStore.isDarkTheme ? 'i-mdi-white-balance-sunny' : 'i-mdi-moon-waxing-crescent'">
                        </div>
                    </button>
                </div>
            </div>

            <form @submit.prevent="handleRegister" class="space-y-6">
                <input v-model="form.email" type="email"
                       class="w-full border-2 border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:border-blue-500 dark:focus:border-blue-400 py-3 rounded-lg focus:outline-none transition ease-in-out duration-300"
                       placeholder="电子邮箱" />
                <input v-model="form.username" type="text"
                       class="w-full border-2 border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:border-blue-500 dark:focus:border-blue-400 py-3 rounded-lg focus:outline-none transition ease-in-out duration-300"
                       placeholder="用户名" />
                <input v-model="form.password" type="password"
                       class="w-full border-2 border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:border-blue-500 dark:focus:border-blue-400 py-3 rounded-lg focus:outline-none transition ease-in-out duration-300"
                       placeholder="密码" />
                <button type="button" @click="handleSubmitCode"
                        class="w-full bg-blue-500 dark:bg-blue-400 text-white dark:text-gray-900 font-semibold py-3 rounded-lg hover:bg-blue-600 dark:hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300">
                    获取验证码
                </button>
                <input v-model="form.code" type="text"
                       class="w-full border-2 border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:border-blue-500 dark:focus:border-blue-400 py-3 rounded-lg focus:outline-none transition ease-in-out duration-300"
                       placeholder="验证码" />
                <button type="submit" :disabled="loading"
                        class="w-full bg-blue-500 dark:bg-blue-400 text-white dark:text-gray-900 font-semibold py-3 rounded-lg hover:bg-blue-600 dark:hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300">
                    {{ loading ? '注册中...' : '注册' }}
                </button>
            </form>
        </div>
    </AppLayout>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useMainStore } from '@/stores/main'
import { useThemeStore } from '@/stores/theme'
import AppLayout from '@/components/AppLayout.vue'
import { api } from '@/api/api'

// 初始化主题
const themeStore = useThemeStore()
themeStore.applyTheme()

// 初始化路由和状态
const router = useRouter()
const store = useMainStore()
const loading = ref(false)
const codeSent = ref(false)

// 表单数据
const form = reactive({
    email: '',
    username: '',
    password: '',
    code: ''
})

// 返回上一页
const goBack = () => {
    router.push('/')
}

// 处理获取验证码
const handleSubmitCode = async () => {
    try {
        await api.sendCode({ email: form.email })
        codeSent.value = true
        alert('验证码已发送，请查收邮箱')
    } catch (error) {
        console.error('获取验证码失败:', error)
        alert('获取验证码失败')
    }
}

// 处理注册
const handleRegister = async () => {
    if (loading.value) return

    if (!codeSent.value) {
        alert('请先获取验证码')
        return
    }

    loading.value = true
    try {
        const token = await api.register(form)
        console.log('Register successful, token:', token)
        store.setToken(token)
        router.push('/')
    } catch (error) {
        console.error('Register failed:', error)
        alert('注册失败')
    } finally {
        loading.value = false
    }
}
</script>